<template>
	<view class="container">
		<!-- 蓝色头部 -->
		<view class="header">
			<view class="nav-bar">
				<uni-icons type="left" size="24" color="#fff" @click="goBack"></uni-icons>
				<text class="nav-title">{{ storeInfo.title || '洗车' }}</text>
			</view>
		</view>

		<!-- 可滚动内容区域 -->
		<scroll-view class="content-scroll" scroll-y>
			<!-- 门店详情模块(包含图片和门店信息) -->
			<view class="store-info-wrapper">
				<!-- 门店大图横幅 -->
				<view class="store-banner">
					<image :src="storeInfo.bannerImage || storeInfo.image" mode="aspectFill" class="banner-image">
					</image>
				</view>

				<!-- 门店详情卡片 -->
				<view class="store-info-card">
					<!-- 门店名称 -->
					<view class="store-name">{{ storeInfo.name }}</view>

					<!-- 评分和销量 -->
					<view class="store-rating-section">
						<view class="stars">
							<uni-icons v-for="(item, i) in 5" :key="i" :type="getStarType(i, storeInfo.rating)"
								:color="i < storeInfo.rating ? '#ff8c00' : '#d3d3d3'" size="20"
								class="star-item"></uni-icons>
						</view>
						<text class="rating-text">4分</text>
						<text class="sales-text">销量: {{ storeInfo.sales }}</text>
					</view>

					<!-- 营业时间 -->
					<view class="store-hours">
						营业时间: {{ storeInfo.hours }}
					</view>

					<!-- 位置 -->
					<view class="store-location">
						<text class="location-text">位置: {{ storeInfo.address }}</text>
						<image src="/static/repair/plane.png" mode="aspectFit" class="location-icon"
							@click="navigateToLocation"></image>
					</view>
				</view>
			</view>

			<!-- 服务项目 -->
			<view class="service-section">
				<text class="section-title">服务项目</text>
				<view class="service-list">
					<view class="service-item" v-for="(service, index) in serviceList" :key="index">
						<text class="service-name">{{ service.name }}</text>
						<view class="service-price">
							<text class="current-price">¥{{ service.currentPrice }}</text>
							<text class="original-price">¥{{ service.originalPrice }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 服务评价 -->
			<view class="review-section">
				<text class="section-title">服务评价</text>
				<view class="review-list">
					<view class="review-item" v-for="(review, index) in reviewList" :key="index">
						<view class="review-header">
							<image :src="review.avatar" mode="aspectFill" class="review-avatar"></image>
							<view class="review-user-info">
								<text class="review-username">{{ review.username }}</text>
								<view class="review-rating">
									<uni-icons v-for="(item, i) in 5" :key="i" :type="getStarType(i, review.rating)"
										:color="i < review.rating ? '#ff8c00' : '#d3d3d3'" size="16"
										class="review-star"></uni-icons>
								</view>
							</view>
							<text class="review-date">{{ review.date }}</text>
						</view>
						<view class="review-content">{{ review.content }}</view>
					</view>
				</view>
			</view>

			<!-- 底部占位，避免被固定按钮遮挡 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>

		<!-- 底部固定按钮 -->
		<view class="bottom-button">
			<text class="button-text" @click="handleAppointment">立即预约</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	// 门店信息
	const storeInfo = ref({
		id: 1,
		name: '大美汽车保养厂(解放路店)',
		title: '洗车',
		rating: 4.2,
		sales: 556,
		hours: '周一至周五 早上8:00-晚上22:00',
		address: '山阳区人民路与解放路交叉口',
		image: '/static/repair/门店.png',
		bannerImage: '/static/repair/门店.png',
		phone: '18642589456'
	})

	// 服务项目列表
	const serviceList = ref([{
			name: '工时价格 (每小时)',
			currentPrice: '35.9',
			originalPrice: '60'
		},
		{
			name: '轮胎',
			currentPrice: '35.9',
			originalPrice: '60'
		},
		{
			name: '......',
			currentPrice: '35.9',
			originalPrice: '60'
		}
	])

	// 评价列表
	const reviewList = ref([{
			username: '黄**',
			avatar: '/static/repair/门店.png',
			rating: 4.2,
			content: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!',
			date: '2022-12-31'
		},
		{
			username: '黄**',
			avatar: '/static/repair/门店.png',
			rating: 4.2,
			content: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!',
			date: '2022-12-31'
		},
		{
			username: '黄**',
			avatar: '/static/repair/门店.png',
			rating: 4.2,
			content: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!',
			date: '2022-12-31'
		},
		{
			username: '黄**',
			avatar: '/static/repair/门店.png',
			rating: 4.2,
			content: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!',
			date: '2022-12-31'
		}
	])

	// 获取星星类型
	const getStarType = (index, rating) => {
		if (index < Math.floor(rating)) {
			return 'star-filled'
		} else if (index < rating) {
			return 'starhalf'
		} else {
			return 'star'
		}
	}

	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}

	// 导航到位置
	const navigateToLocation = () => {
		// 将门店信息存储到本地，供导航页使用
		uni.setStorageSync('navigationStoreInfo', {
			name: storeInfo.value.name,
			address: storeInfo.value.address,
			latitude: storeInfo.value.latitude || 35.2219, // 门店纬度，如果门店信息中有则使用，否则使用默认值
			longitude: storeInfo.value.longitude || 113.2408 // 门店经度，如果门店信息中有则使用，否则使用默认值
		})
		// 跳转到导航页面
		uni.navigateTo({
			url: '/pages/repair/fjmd/mdxq/dh/index'
		})
	}

	// 立即预约
	const handleAppointment = () => {
		// 将门店信息存储到本地，供预约页使用
		uni.setStorageSync('appointmentStoreInfo', {
			id: storeInfo.value.id,
			name: storeInfo.value.name,
			address: storeInfo.value.address
		})
		// 跳转到预约页面
		uni.navigateTo({
			url: '/pages/repair/fjmd/mdxq/ljyy/index'
		})
	}

	// 加载门店详情
	onMounted(() => {
		// 获取路由参数
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options || {}

		// 从本地存储获取门店信息
		const storedStore = uni.getStorageSync('currentStoreDetail')
		if (storedStore) {
			storeInfo.value = {
				...storedStore,
				rating: storedStore.rating || 4.2, // 如果没有评分，默认4.2
				title: storedStore.title || '洗车'
			}
			// 清除存储
			uni.removeStorageSync('currentStoreDetail')
		} else if (options.id) {
			// TODO: 根据ID从接口获取门店详情
			// loadStoreDetail(options.id)
		}
	})
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	/* 蓝色头部 */
	.header {
		width: 100%;
		height: 500rpx;
		background-color: #3486fe;
		padding-top: calc(var(--status-bar-height) - 40rpx);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		height: 88rpx;
		position: relative;
		z-index: 120;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		pointer-events: none;
	}

	.nav-right {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.nav-icon-dot {
		width: 8rpx;
		height: 8rpx;
		background-color: #fff;
		border-radius: 50%;
	}

	.nav-icon-line {
		width: 2rpx;
		height: 30rpx;
		background-color: #fff;
		margin: 0 4rpx;
	}

	.nav-icon-circle {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-icon-inner-circle {
		width: 16rpx;
		height: 16rpx;
		background-color: #fff;
		border-radius: 50%;
	}

	/* 可滚动内容区域 */
	.content-scroll {
		flex: 1;
		margin-top: calc(var(--status-bar-height) + 88rpx - 40rpx);
		overflow-y: auto;
		position: relative;
		z-index: 10;
		padding-top: 40rpx;
	}

	/* 门店详情模块容器 */
	.store-info-wrapper {
		margin: 0 15rpx;
		margin-top: 10rpx;
		position: relative;
		z-index: 110;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #fff;
		/* box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08); */
		padding-top: 20rpx;
		/* border-radius: 20rpx 20rpx 20rpx 20rpx; */
	}

	/* 门店大图横幅 */
	.store-banner {
		width: 96%;
		height: 500rpx;
		background-color: #fff;
		overflow: hidden;
		border-radius: 20rpx 20rpx 0 0;
		padding-left: 15rpx;
	}

	.banner-image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	/* 门店详情卡片 */
	.store-info-card {
		background-color: #fff;
		padding: 30rpx;
		margin: 0;
		border-radius: 0 0 20rpx 20rpx;
	}

	.store-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		line-height: 1.5;
	}

	.store-rating-section {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.stars {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.star-item {
		margin-right: 4rpx;
	}

	.rating-text {
		font-size: 24rpx;
		color: #666;
		margin-right: 20rpx;
	}

	.sales-text {
		font-size: 24rpx;
		color: #666;
	}

	.store-hours {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		line-height: 1.6;
	}

	.store-location {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	.location-text {
		flex: 1;
	}

	.location-icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 15rpx;
	}

	/* 服务项目 */
	.service-section {
		background-color: #fff;
		margin: 20rpx 15rpx 0 15rpx;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.service-list {
		display: flex;
		flex-direction: column;
	}

	.service-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.service-item:last-child {
		border-bottom: none;
	}

	.service-name {
		font-size: 28rpx;
		color: #333;
	}

	.service-price {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.current-price {
		font-size: 28rpx;
		color: #ff8c00;
		font-weight: bold;
	}

	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	/* 服务评价 */
	.review-section {
		background-color: #fff;
		margin: 20rpx 15rpx 120rpx 15rpx;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.review-list {
		display: flex;
		flex-direction: column;
	}

	.review-item {
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.review-item:last-child {
		border-bottom: none;
	}

	.review-header {
		display: flex;
		align-items: flex-start;
		margin-bottom: 15rpx;
	}

	.review-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 15rpx;
		flex-shrink: 0;
	}

	.review-user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.review-username {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.review-rating {
		display: flex;
		align-items: center;
	}

	.review-star {
		margin-right: 4rpx;
	}

	.review-date {
		font-size: 24rpx;
		color: #999;
		align-self: flex-start;
		margin-top: 5rpx;
	}

	.review-content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		margin-left: 95rpx;
	}

	.bottom-placeholder {
		height: 40rpx;
	}

	/* 底部固定按钮 */
	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100rpx;
		background-color: #3486fe;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		padding-bottom: env(safe-area-inset-bottom);
		border-radius: 50rpx;
	}

	.button-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}
</style>